<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群消息</title>
    <script src="./jquery-1.12.1.js"></script>
    <script src="./socket.io.js"></script>
    <script>
		 $(document).ready(function(){
			var userName = "zzgghh2";
			 $.get({
				url: "http://59.110.5.217:30014/splitter/enzyme",
				success: function (data) {
					console.log(data);
				
					if(data.code != 0){
						return;
					}
					
					var wsUrl = data.data;
					
					var initCommand =  {
						"type":"message",
						"command": "init",
						"version":"0.1",
						"id":"",
						"data": {
							"clientInfo":"",
							"clientNature":"enzyme",
							"clientType":"",
						}
					}
				
					var loginCommand = {
						"command": "login",
						"version":"0.1",
						"id":"b5265010-bb7a-11e6-a60f-77d95c87b193",
						"data":{
						  "userName":"zzgghh2",//10.2.9.59上面UserCenter的真实用户
						  "password":"P@ssw0rd",//如果支持其他登录方式，这里的信息可能是其他的
						  "loginType":"dependency",//dependency|singleton  用户单独登录，或者依赖客户端登录
						  "clientNature":"enzyme"//可选参数，用户在依赖模式登录下必填
						}
					}
					
					var ws = new WebSocket(wsUrl);
					ws.onopen = WSonOpen;
					ws.onmessage = WSonMessage;
					ws.onclose = WSonClose;
					ws.onerror = WSonError;

					function WSonOpen() {
						Log("连接已经建立。", "OK");
						$("#message").append("<h4>初始化：</h4>");
						ws.send(JSON.stringify(loginCommand));
					};

					function WSonMessage(event) {
						//$("#message").append("<h4>来自服务端消息："+event.data+"</h4>");
						Log(event.data);
						var msg = JSON.parse(event.data);
						Log(msg);
						if(msg.event == "acceptMessage"){
							if(msg.data.msgType == "message"){
								$("#message").append("<h4>来自服务端消息："+event.data+"</h4>");
								Log(event.data);
							} else if(msg.data.msgType == "group"){
								if(msg.data.sender != userName){
									$("#content").append("<div>"+msg.data.sender+"说："+msg.data.content+"</div></br>");
								}
							}
						} else {
							$("#message").append("<h4>来自服务端消息："+event.data+"</h4>");
						}
					};

					function WSonClose() {
						Log("连接关闭。", "ERROR");
					};


					function WSonError() {
						Log("WebSocket错误。", "ERROR");
					};

					function Log(mes){
						console.log(mes);
					}
					$("#send").click(function(){
						Log($("#sender_c").val());
						var command = {
							"command":"sendmessage",
							"version":"0.1",
							"id":"b5265010-bb7a-11e6-a60f-77d95c87b19f",
							"data": {
								"type":"group",
								"groupId":"1",
								"sender":userName,
								"content":$("#sender_c").val(),
								"options":{
									"save":"true"
								},
							}
						}
						console.log(command);
						ws.send(JSON.stringify(command));
						$("#content").append("<div style='float:right;'>"+userName+"说："+$("#sender_c").val()+"</div><br/>");
						$("#sender_c").val("");
					});
				},
				error:function() {
					return alert("系统异常,获取用户信息失败");
				}
			});
		});	
    </script>
</head>
<body>
<div style="margin-left:50px;">
	普通消息：
	<div id="message"></div>
	群消息：
    <div id="content" style="width:450px;height:350px;overflow:auto;border:1px solid black;margin-bottom:20px;"></div>
	<textarea id="sender_c" style="width:370px;height:50px;overflow:auto;border:1px solid black;margin-bottom:20px;float:left"></textarea>
	<button id="send" style="float:left;width:50px;height:50px;margin-left:20px;">发送</button>
</div>
</body>
</html>